<template>
  <view class="chart">
    <qiun-data-charts type="area" :opts="opts" :chart-data="chartData" />
  </view>
</template>

<script lang="ts" setup>
const chartData = ref<any>({})
const opts = {
  color: [
    // '#1890FF',
    // '#91CB74',
    // '#FAC858',
    // '#EE6666',
    // '#73C0DE',
    // '#3CA272',
    // '#FC8452',
    // '#9A60B4',
    // '#ea7ccc',
    '#34C239',
    '#F88615',
    '#0088FE',
  ],
  padding: [0, 10, 10, 10],
  enableScroll: false,
  legend: {
    position: 'top',
    padding: 10,
    margin: 10,
    fontSize: 11,
    fontColor: '#010100',
  },
  xAxis: {
    disableGrid: true,
    fontSize: 11,
    fontColor: '#010100',
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 4,
    fontSize: 10,
  },
  extra: {
    // line: {
    //   type: 'straight',
    //   width: 2,
    //   activeType: 'hollow',
    // },
    tooltip: {
      fontSize: 12,
      borderRadius: 4,
      legendShape: 'rect',
    },
    area: {
      type: 'straight',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true,
      activeType: 'hollow',
    },
  },
}

function getChartData() {
  const res = { data: {
    xz: [4, 0, 5, 0, 8, 0, 0],
    x: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
    cl: [0, 2, 10, 3, 0, 4, 6],
    wc: [2, 0, 9, 4, 5, 12, 0],
  } }

  const data = {
    categories: res.data.x,
    series: [
      {
        name: '新增待办',
        data: res.data.xz,
      },
      {
        name: '处理待办',
        data: res.data.cl,
      },
      {
        name: '完成待办',
        data: res.data.wc,
      },
    ],
  }
  chartData.value = JSON.parse(JSON.stringify(data))
}

onLoad(() => {
  // 登录成功-刷新列表
  uni.$on('onLoginSuccess', () => {
    getChartData()
  })
})

onShow(() => {
  getChartData()
})
</script>

<style lang="scss" scoped></style>
